<template>
  <div class="distribution_video" :style="`width: ${width}px;`">
    <div id="distribution_video"></div>
  </div>
  <!-- <div id="myPlayer" style="width: 38vw; height: 53vh"></div> -->
</template>

<script>
import tdTheme from "@/api/ops/echart/theme.json"; // 引入默认主题
import EZUIKit from 'ezuikit-js'
// import {
//   provinceRegionCount,
//   alarmCountGroupByProvince,
// } from "@/api/ops/dashboard";

export default {
  name: "Video",
  data() {
    return {
      options: {},
      map: [],
      myChart: null,
      geoCoord: {

      },
      zoomSize: 1.4, // 地图缩放比例
      videoUrl: 'ezopen://open.ys7.com/J69759563/1.hd.live',
      accessToken: 'at.3cew2gd3bx2kope685f1hws43vaeeubz-92pppx66hj-1snto50-b6aniaenb',
    };
  },
  props: {
    refreshNum: String,
    screenHeight: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 500
    },
    width: {
      type: Number,
      default: 500
    },
  },
  watch: {
    refreshNum(val, oldVal) {
      // this.init();
    },
    height(val, oldVal) {
      console.log(55555555, val);
      this.handleAfterClose();
      this.$nextTick(() => {
        this.handleVedio()
      })
    },
  },
  mounted() {
    this.handleVedio()
  },
  methods: {
    init() {

    },
    /**
     * //视频流接口
     * @param {*}
     */
    // getLive() {
    //   let params = {
    //     robotId: this.$route.query.robotId,
    //     protocol: 1, //参数有1、2。2返回带https的hls的链接
    //     quality: 1, //视频清晰度，1-高清（主码流）、2-流畅（子码流）
    //   }
    //   getLive(params).then((res) => {
    //     if (res.code == 0) {
    //       this.videoUrl = res.data
    //     } else {
    //       this.msgError(res.message)
    //     }
    //   })
    // },
    /**
     * cameraType: 1, //相机类型,,1拍照监控(默认),2环境监控,3巡航监控
     */
    getToken(cameraType = 1) {
      // let params = {
      //   robotId: this.$route.query.robotId,
      //   cameraType, //相机类型,,1拍照监控(默认),2环境监控,3巡航监控
      // }
      // getCameraToken(params).then((res) => {
      //   if (res.code == 0) {
      //     this.accessToken = res.data
      //   } else {
      //     this.msgError(res.message)
      //   }
      // })
    },
    //视频播放
    handleVedio() {
      // this.videoShow = true;
      this.$nextTick(() => {
        // var player = new EZUIPlayer("myPlayer");
        function handleError(e) {
          console.log("handleError", e)
        }

        function handleSuccess() {
          console.log("handleSuccess")
        }
        console.log('55555555555-- - 1', this.lWidth, this.height,);
        const ohight = this.screenHeight * 85 / 1080
        this.player = new EZUIKit.EZUIKitPlayer({
          id: "distribution_video",
          url: this.videoUrl,
          accessToken: this.accessToken,
          // width: this.screenHeight * 440 / 1080 * (888.9 / 500),
          width: (this.height - ohight) * (888.9 / 500),
          // height: 420,
          // width: 820,
          // height: this.screenHeight * 440 / 1080,
          height: this.height - ohight,
          autoplay: true,
          // decoderPath: "/static", //*必填，请填写ezuikit绝对路径
          handleError: handleError,
          handleSuccess: handleSuccess,
        })
      })
    },
    //完全关闭modal
    handleAfterClose() {
      //销毁创建的对象，防止出现关闭页面依旧有声音的情况
      if (this.player) {
        this.player.stop();
        this.player.destroy();
        this.player = null;
      }

      //将dom移除，下次创建视频对象在创建这个dom,防止第二次打开发现创建了两个视频
      document.getElementById("distribution_video").innerHTML = "";
      // const videoContainer = document.getElementById("distribution_video");
      // videoContainer
      //   ? videoContainer.parentNode.removeChild(videoContainer)
      //   : ""; // 从 DOM 中移除 <div> 元素
    }

  }
};
</script>

<style lang="scss" scoped>
.distribution_video {
  display: flex;
  justify-content: center;
  margin-top: 0.56rem;

  /deep/ #distribution_video {
    border-radius: 8px;
    overflow: hidden;
  }
}
</style>
